<template>
  <div class="detail">
    <div class="top">
      <van-nav-bar
        title="XXX标准套房"
        left-text="返回"
        right-text="收藏"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      <van-notice-bar
        left-icon="volume-o"
        text="XXX酒店为您提供最温馨的服务，让您能够在休闲娱乐的同时，得到最安心的居住服务，如在消费的时候有任何疑问，请致电前台，我们会及时为您解决。"
      />
      <hr />
    </div>
    <div class="content">
      <img src="../assets/images/1.jpg" alt="" />
      <h5>介绍</h5>
      <h5>照片</h5>
      <h5>评价</h5>
    </div>
    <hr>
    <div class="yd">
      <button>立即预定</button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("收藏成功");
    },
  },
};
</script>

<style scoped>
.detail {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.top {
  height: 13vh;
}
.content {
  flex: 1;
  overflow: auto;
}
.yd {
  height: 0vh;
  margin: .5rem auto;
}
button {
  height: 6vh;
  width: 60vw;
  font-size: 1rem;
  background-color: rgba(9, 143, 143, 0.733);
  border-radius: 3vh;
  color: blanchedalmond;
  outline: none;
}
</style>